<script setup>
import router from "@/router";
import {computed, onMounted, reactive, ref} from "vue";
import store from "@/store";
import {$ajax, apiUrl} from "@/utils/ajax";

const user = computed(() => {
  return store.state.account
})
const times = ref(0)
let timer;
onMounted(() => {
  store.dispatch("getUser")
})
const modify = ref()
const form = reactive({
  password: '',
  confirmPassword: '',
  code: ""
})
const rules = reactive({
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
  ],
  confirmPassword: [
    {required: true, message: '请输入确认密码', trigger: 'blur'},
    {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'},
    {
      validator: (rule, value, callback) => {
        if (value !== form.password) {
          callback(new Error('两次密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'blur'},
    {min: 6, max: 6, message: '长度为 6 个字符', trigger: 'blur'}
  ]
})
const loading = ref(false)
const getCode = () => {
  loading.value = true
  $ajax.post(`${apiUrl}authorization/merchantLoginCode`, {mobile: user.value.mobile}).then(() => {
    loading.value = false
    times.value = 60
    djs()
  }).catch(() => {
    loading.value = false
    times.value = 0
    clearTimeout(timer)
  })
}
const djs = () => {
  if (times.value < 1) {
    return clearTimeout(timer)
  }
  timer = setTimeout(() => {
    times.value--
    djs()
  }, 1000)
}

const modifyPassword = () => {
  modify.value.validate(err => {
    loading.value = err
    if (err) {
      $ajax.post(`${apiUrl}merchant/user/modify`, {
        password: form.password,
        code: form.code
      }).then(() => {
        loading.value = false
        router.replace({name: 'home'})
      }).catch(() => loading.value = false)
    }
  })
}
</script>

<template>
  <div class="back" @click="router.replace({name:'home'})">
    <el-icon size="16">
      <ArrowLeft/>
    </el-icon>
    <div>修改密码</div>
  </div>
  <el-form ref="modify" :model="form" label-position="top" :rules="rules" class="modify" size="large">
    <el-form-item label="验证码" prop="code">
      <el-input v-model="form.code" placeholder="请输入短信验证码" clearable>
        <template #suffix>
          <el-button :type="times>0?'info':'primary'" link @click="getCode" :disabled="times>0" :loading="loading">
            {{ times > 0 ? `${times}秒重新获取` : '获取验证码' }}
          </el-button>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password" placeholder="请输入密码" clearable/>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="form.confirmPassword" type="password" placeholder="请再次输入密码" clearable/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="modifyPassword" round :loading="loading">修改密码</el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="less">
.modify {
  margin: 0 15px;

  .el-input {
    .el-input__wrapper {
      border-radius: 45px;
    }
  }

  .el-button{
    width: 100%;
  }
}
</style>